<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="x-rim-auto-match" content="none">
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>缤纷五月</title>
    <script type="text/javascript" src="/js/assets/jquery-3.1.0.min.js"></script>
    <script type="text/javascript">
//        $.ajax({
//            type: 'post',
//            url: "",
//            dataType: 'json',
//            data:data,
//            success: function(data) {
//                console.info(data);
//                if(data.result=='success'){
//
//                }else{
//                    alert(data.messageText);
//                    //跳转到登录
//                }
//
//            },
//            error: function(e) {
//
//            }
//        });

    </script>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing: border-box;
        }
        input{
            background: transparent;
            -webkit-tap-highlight-color:rgba(255,255,255,0);
            -webkit-appearance:none;
        }
        @media only screen and (min-width:320px) and (orientation:portrait){
            input{font-size:14px;!important;}
            div{font-size:9px;!important;}

        }
        @media only screen and (min-width:360px) and (orientation:portrait){
            input{font-size:15px;!important;}
            div{font-size:10px;!important;}
        }
        @media only screen and (min-width:412px) and (orientation:portrait){
            input{font-size:16px;!important;}
            div{font-size:11px;!important;}
        }

        @media only screen and (min-width:600px) and (orientation:portrait){
            input{font-size:20px;!important;}
            div{font-size:13px;!important;}
        }

        @media only screen and (min-width:768px) and (orientation:portrait){
            input{font-size:24px;!important;}
            div{font-size:24px;!important;}
        }
        @media only screen and (min-width:1000px) and (orientation:portrait){
            input{font-size:28px;!important;}
            div{font-size:28px;!important;}
        }
        ul,li{
            list-style: none;
            display: block;
        }

        /*图片点击放大效果*/
        #photoBg{
            position: fixed;
            height: 100%;
            background-color:rgba(77,77,75,0.8);
            z-index:10;
            padding:20% 0;
            box-shadow:inset rgba(0,0,0,1) 0 -64px 128px;


            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;


            -webkit-transform: scaleX(0);
            -moz-transform: scaleX(0);
            -o-transform: scaleX(0);
            -ms-transform: scaleX(0);
            transform: scaleX(0);


            -webkit-transform-origin: right;
            -ms-transform-origin: right;
            -moz-transform-origin: right;
            -o-transform-origin: right;
            transform-origin: right;
        }

        #closeButton{
            position: absolute;
        }


        /*内容设置*/
        #recharge1{
            width: 100%;
            position: absolute;
            bottom: 3.5%;
            left: 0;
        }
        .left{
            display: block;
            float: left;
        }
        .clear{
            clear: both;
        }
        #activityBtn{
            position: fixed;
        }
    </style>

</head>
<body style="margin: 0">

<!--放大的图片位置-->
<div id="photoBg">
    <div id="closeButton">
        <img id="closeBtn" src="../img/closeBtn.png"/>
    </div>
    <div id="photos">
        <img id="activityRule" src="../img/showRule.png"/>
    </div>
</div>

<!--内容位置-->
<div id='bgPic' style="background: url('../img/May.png') no-repeat center;background-size: 100% 100%;width: 100%;position: relative">
    <div id="activityBtn">
        <img class="btn" src="../img/activityBtn.png"/>
    </div>
    <div class="space"></div>
    <div id="recharge" class="clear">
        <ul class="month">

        </ul>
    </div>
    <li class="clear"></li>
    <div class="space1"></div>
    <div id="recharge1" class="clear">
        <ul class="week">

        </ul>
    </div>
</div>
</body>

<script>
    var w = document.documentElement.clientWidth;

    var bodyW=w+'px';
    $('body').width(bodyW);

    var bgPic=document.querySelector('#bgPic');
    var he=2873*w/750+'px';
    bgPic.style.height=he;
//
//
    $('.month').css('margin-left',184/750*w+'px');
    $('.week').css('margin-left',184/750*w+'px');


    $('.space').css('width',750/750*w+'px');
    $('.space').css('height',2320/750*w+'px');
    $('.space1').css('width',750/750*w+'px');
    $('.space1').css('height',90/750*w+'px');


//    活动弹窗按钮
    $('.btn').css('width',129/750*w+'px');
    $('.btn').css('height',199/750*w+'px');
    $('#activityBtn').css('top',480/750*w+'px');
    $('#activityBtn').css('right',-50/750*w+'px');

//    活动弹窗内容
    $('#activityRule').css('width',750/750*w+'px');
    $('#activityRule').css('height',760/750*w+'px');

//    弹窗关闭按钮
    $('#closeBtn').css('width',72/750*w+'px');
    $('#closeBtn').css('height',72/750*w+'px');
    $('#closeButton').css('top',360/750*w+'px');
    $('#closeButton').css('right',10/750*w+'px');

//    整个屏幕滚动触发按钮变化
    $('html').bind("touchstart",function() {
        $('#activityBtn').css('right',0/750*w+'px');
    });
    $('html').bind("touchend",function() {
        $('#activityBtn').css('right',-40/750*w+'px');
    });


    //获取月数据
    $.ajax({
        type: 'post',
        url: "/acivity/investToRank/statMonth",
        dataType: 'json',
        success: function(data) {
//            console.info(data);
            var month='';
           for(var i=0;i<data.length;i++){
//               if(data[i].userMobile==null){
//                   data[i].userMobile = '无';
//               }else{
//                   data[i].userMobile = data[i].userMobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
//               }
               if(data[i].rankType==2){
                   month+="<li> <div class='left' style='width:5%;text-align: center'>"+data[i].rank+"</div> <div class='left' style='width:25%;margin-left:14%'>"+data[i].userMobile+"</div> <div class='left' style='margin-left:11%;'>"+data[i].investAmount+"</div></li><li class='clear'></li>"
//                   month+="<li> <div class='left' style='width:5%;text-align: center'>"+data[i].rank+"</div> <div class='left left1' style='width:25%;margin-left:14%'>"+data[i].userMobile+"</div> <div class='left' style='margin-left:11%;'>"+data[i].investAmount+"</div></li><li class='clear'></li>"
               }
           }
            $(".month").html(month);
        },
        error: function(e) {

        }
    });

    //获取周数据
    $.ajax({
        type: 'post',
        url: "/acivity/investToRank/statWeek",
        dataType: 'json',
        success: function(data) {
            console.info(data);
            var week='';
            for(var i=0;i<data.length;i++){
                if(data[i].rankType==1){
                    week+="<li> <div class='left' style='width:5%;text-align: center'>"+data[i].rank+"</div> <div class='left' style='width:25%;margin-left:14%'>"+data[i].userMobile+"</div> <div class='left' style='margin-left:11%;'>"+data[i].investAmount+"</div></li><li class='clear'></li>"
                }
            }
            $(".week").html(week);
        },
        error: function(e) {

        }
    });

</script>

<script>
    $(document).ready(function(){
        $('#activityBtn').click(function () {
            $('#photoBg').css('transform', 'scaleX(1)');
            $('#closeButton').click(function () {
                $('#photoBg').css('transform', 'scaleX(0)')
            });
        });
    });
</script>

<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?04655570a7f6ba29233f7e34e328d5bb";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</html>